<style>
@media print {
  ._wz_vehicleAccidentRegistrationSee {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div class="_wz_vehicleAccidentRegistrationSee" ref="vehicleAccidentRegistrationSee">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">
          基本信息
          <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">
            打印
          </Button>
        </td>
      </tr>
      </tbody>
    </table>
    <vehicleBriefly :vehicleBrieflyData="vehicleBrieflyData" seeType="true"></vehicleBriefly>

    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">事故车辆信息</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">车主业户</td>
        <td>{{!!formData.accidentVehicleOwnerName?formData.accidentVehicleOwnerName:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">联系电话</td>
        <td>{{!!formData.accidentVehicleOwnerPhone?formData.accidentVehicleOwnerPhone:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">登记人</td>
        <td>{{!!formData.accidentRegistrantName?formData.accidentRegistrantName:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">事故发生日期</td>
        <td>{{!!formData.accidentTime?formData.accidentTime:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">事故性质</td>
        <td>{{!!formData.accidentProperty?formData.accidentProperty:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">事故责任</td>
        <td>{{!!formData.accidentDuty?formData.accidentDuty:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">车辆损坏情况</td>
        <td>{{!!formData.accidentContent?formData.accidentContent:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">保险赔付金额</td>
        <td>{{!!formData.accidentCompensationInsurance?formData.accidentCompensationInsurance:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">赔付客户金额</td>
        <td>{{!!formData.accidentCompensationCustomer?formData.accidentCompensationCustomer:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">领取人</td>
        <td>{{!!formData.accidentCompensationContactsName?formData.accidentCompensationContactsName:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">联系方式</td>
        <td>{{!!formData.accidentCompensationContactsPhone?formData.accidentCompensationContactsPhone:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">领取时间</td>
        <td>{{!!formData.accidentCompensationDate?formData.accidentCompensationDate:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">事故地点</td>
        <td colspan="5" style="min-height:50px;padding:5px 10px;">{{!!formData.accidentSite ? formData.accidentSite : '--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">事故原因</td>
        <td colspan="5" style="min-height:50px;padding:5px 10px;">{{!!formData.accidentCause ? formData.accidentCause : '--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">事故车辆资料</td>
        <td colspan="5">
          <div style="min-height:50px;">
            <div style="width: 195px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in formData.imgEntityList">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!item.vehicleAccidentRecordImgUrl?apiUrl.imgUrl+item.vehicleAccidentRecordImgUrl:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
              <div style="line-height: 30px;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;height: 30px;background: #f3f3f3;border-radius: 4px;">
                {{ item.vehicleAccidentRecordImgDescribe }}
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">备注</td>
        <td colspan="5" style="min-height:50px;padding:5px 10px;">{{!!formData.accidentRemark ? formData.accidentRemark : '--'}}</td>
      </tr>
      </tbody>
    </table>


    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
  import vehicleBriefly from '../expire/vehicleBriefly.vue'

  export default {
    props: ["selectData"],
    components: {
      vehicleBriefly,//车辆简述
    },
    data() {
      return {
        spinShow:false,//本页加载
        formData: {},
        vehicleBrieflyData: null,//车辆简述
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;

      that.spinShow = true;
      that.axios.post(that.apiUrl.webApi + "/management/vehicleAccident/vehicleAccidentInfo",{uuid:that.selectData.uuid}).then(res => {
        that.spinShow = false;
        if (!!res) {
          that.formData = res.data.data;//车辆简述
          that.vehicleBrieflyData = { // 1 车辆  2 挂车
            modelType: 1,
            value: that.formData.refVehicleUuid
          };
        }
      }).catch(err => {
        console.log("失败", err)
      })

    },
    methods: {//执行的方法
      printTest() {
        this.$print(this.$refs.vehicleAccidentRegistrationSee) // 使用
      },
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_vehicleAccidentRegistrationSee {
    input,.ivu-select-selection{
      border:0px;
    }
    .ivu-icon{
      display: none;
    }

    >table {
      table-layout:fixed;
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px !important;

      td {
        min-width: 0;
        height: 40px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        border: 1px solid #515a6e;
        padding: 0 10px;
        word-break: break-word;
      }
    }

    .demo-upload-list {
      margin: 5px auto;
      width: 195px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 0 0 0;

      img {
        min-height: 30%;
        max-height: 90%;
        min-width: 30%;
        max-width: 90%;
        //width: 100%;
        //height: 100%;
      }
    }
  }

</style>
